From 867efe2e3320b572677e95f4fc9472d72baa7341 Mon Sep 17 00:00:00 2001 From: Adrien Plazas Date: Fri, 7 Sep 2018 12:32:36 +0200 Subject: [PATCH] Adwaita: Style separator.sidebar Let separators be declared as sidebars to have the same style as those drawn by GtkStackSidebar. This also let them handle the selection-mode class, whether they are assigned it or they descend from something in selection mode. Also drop setting the selection mode color for non-sidebar separators. This is convenient when building a custom sidebar using a GtkSeparator and to extend a sidebar to the title bar. --- gtk/theme/Adwaita/_common.scss | 45 +++++++++++++++--------- gtk/theme/Adwaita/gtk-contained-dark.css | 14 +++++--- gtk/theme/Adwaita/gtk-contained.css | 14 +++++--- 3 files changed, 46 insertions(+), 27 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 2031b79906..30781a8cb3 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -1643,7 +1643,7 @@ headerbar { // add vertical margins to common widget on the headerbar to avoid them spanning the whole height entry, spinbutton, - separator, + separator:not(.sidebar), button { margin-top: 6px; margin-bottom: 6px; @@ -3605,10 +3605,6 @@ separator { background: transparentize(black, 0.9); min-width: 1px; min-height: 1px; - - &.selection-mode { - background-color: darken($selected_bg_color, 20%); - } } @@ -3815,19 +3811,21 @@ filechooserbutton:drop(active) { border-style: none; background-color: mix($bg_color, $base_color, 50%); - @at-root %sidebar_left, - &:dir(ltr), - &.left, - &.left:dir(rtl) { - border-right: 1px solid $borders_color; - border-left-style: none; - } + &:not(separator) { + @at-root %sidebar_left, + &:dir(ltr), + &.left, + &.left:dir(rtl) { + border-right: 1px solid $borders_color; + border-left-style: none; + } - @at-root %sidebar_right - &:dir(rtl), - &.right { - border-left: 1px solid $borders_color; - border-right-style: none; + @at-root %sidebar_right + &:dir(rtl), + &.right { + border-left: 1px solid $borders_color; + border-right-style: none; + } } &:backdrop { @@ -3867,6 +3865,19 @@ stacksidebar { } } +separator.sidebar { + background-color: $borders_color; + + &:backdrop { + background-color: $backdrop_borders_color; + } + + &.selection-mode, + .selection-mode & { + background-color: darken($selected_bg_color, 20%); + } +} + /**************** * File chooser * diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index c250eb223a..ff295e242b 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -670,7 +670,7 @@ searchbar > revealer > box { padding: 6px; border-width: 0 0 1px; } .solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), .solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), .solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; } -headerbar entry, headerbar spinbutton, headerbar separator, headerbar button { margin-top: 6px; margin-bottom: 6px; } +headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button { margin-top: 6px; margin-bottom: 6px; } headerbar switch { margin-top: 9px; margin-bottom: 9px; } @@ -1569,8 +1569,6 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; } -separator.selection-mode { background-color: #0f2b48; } - /********* Lists * */ list { color: white; background-color: #232729; border-color: #1b1f20; } @@ -1663,9 +1661,9 @@ filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } /*********** Sidebar * */ .sidebar { border-style: none; background-color: #2b3032; } -stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: 1px solid #1b1f20; border-left-style: none; } +stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { border-right: 1px solid #1b1f20; border-left-style: none; } -stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #1b1f20; border-right-style: none; } +stacksidebar.sidebar:dir(rtl) list .sidebar:not(separator):dir(rtl), stacksidebar.sidebar.right list .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid #1b1f20; border-right-style: none; } .sidebar:backdrop { background-color: #2c3133; border-color: #202425; transition: 200ms ease-out; } @@ -1679,6 +1677,12 @@ stacksidebar row > label { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } +separator.sidebar { background-color: #1b1f20; } + +separator.sidebar:backdrop { background-color: #202425; } + +separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #0f2b48; } + /**************** File chooser * */ row image.sidebar-icon { opacity: 0.7; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 2ee69b8d8d..28b698f696 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -678,7 +678,7 @@ searchbar > revealer > box { padding: 6px; border-width: 0 0 1px; } .solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), .solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), .solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; } -headerbar entry, headerbar spinbutton, headerbar separator, headerbar button { margin-top: 6px; margin-bottom: 6px; } +headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button { margin-top: 6px; margin-bottom: 6px; } headerbar switch { margin-top: 9px; margin-bottom: 9px; } @@ -1589,8 +1589,6 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; } -separator.selection-mode { background-color: #215d9c; } - /********* Lists * */ list { color: black; background-color: #ffffff; border-color: #b6b6b3; } @@ -1683,9 +1681,9 @@ filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } /*********** Sidebar * */ .sidebar { border-style: none; background-color: #f4f4f3; } -stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: 1px solid #b6b6b3; border-left-style: none; } +stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { border-right: 1px solid #b6b6b3; border-left-style: none; } -stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #b6b6b3; border-right-style: none; } +stacksidebar.sidebar:dir(rtl) list .sidebar:not(separator):dir(rtl), stacksidebar.sidebar.right list .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid #b6b6b3; border-right-style: none; } .sidebar:backdrop { background-color: #f2f2f2; border-color: #c0c0bd; transition: 200ms ease-out; } @@ -1699,6 +1697,12 @@ stacksidebar row > label { padding-left: 6px; padding-right: 6px; } stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } +separator.sidebar { background-color: #b6b6b3; } + +separator.sidebar:backdrop { background-color: #c0c0bd; } + +separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #215d9c; } + /**************** File chooser * */ row image.sidebar-icon { opacity: 0.7; } -- 2.30.2